import React from 'react';
import { motion } from 'framer-motion';
import { 
  Zap, 
  Shield, 
  BarChart3, 
  Users, 
  Database, 
  Smartphone,
  ArrowRight,
  CheckCircle
} from 'lucide-react';

const Features = () => {
  // 平台优势功能列表
  const features = [
    {
      icon: Zap,
      title: "5年良好口碑",
      description: "稳居行业TOP1，值得信赖的短视频创作平台",
      color: "#345aff"
    },
    {
      icon: Shield,
      title: "专业BD团队",
      description: "经验丰富的商务拓展团队，为您提供全方位支持",
      color: "#345aff"
    },
    {
      icon: BarChart3,
      title: "享行业顶尖佣金",
      description: "高佣金比例，让您的创作获得更高回报",
      color: "#345aff"
    },
    {
      icon: Users,
      title: "全场景变现",
      description: "多渠道变现方式，满足不同创作者需求",
      color: "#345aff"
    },
    {
      icon: Database,
      title: "满足多样化需求",
      description: "灵活的创作工具，适应各种内容创作场景",
      color: "#345aff"
    },
    {
      icon: Smartphone,
      title: "云端组队模式",
      description: "在线协作创作，打破地域限制，提升创作效率",
      color: "#345aff"
    },
    {
      icon: Zap,
      title: "多元收益结构",
      description: "多种收益模式，为创作者提供稳定收入来源",
      color: "#345aff"
    },
    
    {
      icon: Shield,
      title: "专业交付陪跑",
      description: "一站式变现服务，从创作到收益全程指导",
      color: "#345aff"
    },
    {
      icon: CheckCircle,
      title: "新手友好教程",
      description: "丰富的新手教程，帮助零基础用户快速上手创作",
      color: "#345aff"
    }
  ];

  return (
    <section id="features" className="py-20 bg-white dark:bg-zinc-900 relative overflow-hidden">
      {/* 背景元素 */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-0 left-0 w-96 h-96 bg-blue-100 dark:bg-blue-900/10 blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-cyan-100 dark:bg-cyan-900/10 blur-3xl translate-x-1/2 translate-y-1/2"></div>
      </div>
      
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <motion.div
            className="inline-flex items-center px-4 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <Zap className="w-5 h-5 mr-2" />
            <span className="font-medium">平台优势</span>
          </motion.div>
          
          <motion.h2
            className="text-3xl md:text-4xl lg:text-5xl font-bold text-zinc-900 dark:text-white mb-6"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            创作猫
            <span className="text-[#345aff]"> 核心优势</span>
          </motion.h2>
          
          <motion.p
            className="text-lg text-zinc-600 dark:text-zinc-300"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, delay: 0.4 }}
          >
            五年行业经验，为创作者提供全方位支持，实现内容价值最大化
          </motion.p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <motion.div
              key={index}
              className="bg-white dark:bg-zinc-800 p-8 border border-zinc-200 dark:border-zinc-700 transition-all duration-300 group"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: 0.2 + index * 0.1 }}
              whileHover={{ y: -10 }}
            >
              <div className={`w-14 h-14 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`} style={{ backgroundColor: feature.color }}>
                <feature.icon className="w-7 h-7 text-white" />
              </div>
              
              <h3 className="text-xl font-bold text-zinc-900 dark:text-white mb-3">{feature.title}</h3>
              
              <p className="text-zinc-600 dark:text-zinc-300 mb-6">{feature.description}</p>
              
              <motion.a
                href="#"
                className="inline-flex items-center text-blue-600 dark:text-blue-400 font-medium group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-200"
                whileHover={{ x: 5 }}
              >
                了解更多
                <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-200" />
              </motion.a>
            </motion.div>
          ))}
        </div>
        
        {/* 功能对比部分 */}
        <motion.div
          className="mt-24 bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 p-8 md:p-12 border border-blue-100 dark:border-blue-900/30"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, delay: 0.6 }}
        >
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <motion.div
                className="inline-flex items-center px-4 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 mb-6"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
              >
                <BarChart3 className="w-5 h-5 mr-2" />
                <span className="font-medium">行业对比</span>
              </motion.div>
              
              <h3 className="text-3xl font-bold text-zinc-900 dark:text-white mb-6">
                与其他平台相比，我们的优势
              </h3>
              
              <p className="text-lg text-zinc-600 dark:text-zinc-300 mb-8">
                创作猫在创作者收益、服务质量和用户体验方面都优于行业标准。
              亲自体验差异。
              </p>
              
              <div className="space-y-4">
                {[
                  { title: "创作者收益", value: "3.5x", description: "比行业平均收益更高" },
                  { title: "平台稳定性", value: "99.9%", description: "确保您的创作始终在线" },
                  { title: "创作者满意度", value: "98%", description: "创作者报告的满意度评分" }
                ].map((stat, index) => (
                  <motion.div
                    key={index}
                    className="flex items-start"
                    initial={{ opacity: 0, x: -20 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.5, delay: 0.8 + index * 0.1 }}
                  >
                    <CheckCircle className="w-6 h-6 text-green-500 mt-1 mr-3 flex-shrink-0" />
                    <div>
                      <div className="flex items-baseline">
                        <span className="text-lg font-semibold text-zinc-900 dark:text-white mr-2">{stat.title}:</span>
                        <span className="text-2xl font-bold text-blue-600 dark:text-blue-400">{stat.value}</span>
                      </div>
                      <p className="text-zinc-600 dark:text-zinc-300">{stat.description}</p>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>
            
            <motion.div
              className="relative"
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: 0.4 }}
            >
              <div className="bg-white dark:bg-zinc-800 p-6 border border-zinc-200 dark:border-zinc-700">
                <div className="flex justify-between items-center mb-6">
                  <h4 className="font-bold text-lg text-zinc-900 dark:text-white">平台指标</h4>
                  <div className="flex space-x-2">
                    <div className="w-3 h-3 bg-red-400"></div>
                    <div className="w-3 h-3 bg-yellow-400"></div>
                    <div className="w-3 h-3 bg-green-400"></div>
                  </div>
                </div>
                
                <div className="space-y-6">
                  {[
                    { name: "创作猫", value: 95, color: "#345aff" },
                    { name: "竞争对手 A", value: 65, color: "#6b7280" },
                    { name: "竞争对手 B", value: 45, color: "#6b7280" }
                  ].map((item, index) => (
                    <div key={index}>
                      <div className="flex justify-between mb-2">
                        <span className="font-medium text-zinc-900 dark:text-white">{item.name}</span>
                        <span className="font-medium text-zinc-900 dark:text-white">{item.value}%</span>
                      </div>
                      <div className="w-full bg-zinc-200 dark:bg-zinc-700 h-2.5">
                        <motion.div
                          className="h-2.5"
                          style={{ backgroundColor: item.color }}
                          initial={{ width: 0 }}
                          whileInView={{ width: `${item.value}%` }}
                          viewport={{ once: true }}
                          transition={{ duration: 1, delay: 1 + index * 0.2 }}
                        ></motion.div>
                      </div>
                    </div>
                  ))}
                </div>
                
                <div className="mt-8 pt-6 border-t border-zinc-200 dark:border-zinc-700">
                  <div className="flex items-center">
                    <div className="flex -space-x-2 mr-4">
                      {[1, 2, 3].map((item) => (
                        <div 
                          key={item} 
                          className="w-8 h-8 bg-zinc-200 dark:bg-zinc-700 border-2 border-white dark:border-zinc-800 flex items-center justify-center text-xs font-medium text-zinc-700 dark:text-zinc-300"
                        >
                          {item === 1 ? 'A' : item === 2 ? 'B' : 'C'}
                        </div>
                      ))}
                    </div>
                    <div>
                      <div className="text-sm font-medium text-zinc-900 dark:text-white">创作者认可</div>
                      <div className="text-xs text-zinc-500 dark:text-zinc-400">基于10,000+创作者评估</div>
                    </div>
                  </div>
                </div>
              </div>
              
              {/* 浮动元素 */}
              <div className="absolute -top-6 -right-6 w-16 h-16 bg-blue-500 opacity-20 blur-xl"></div>
              <div className="absolute -bottom-6 -left-6 w-16 h-16 bg-cyan-500 opacity-20 blur-xl"></div>
            </motion.div>
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export default Features;